<template>
  <div class="container">
    <div class="item">
      <div class="itemHeader"><i class="el-icon-table-lamp"></i> zspt 校园各区路灯个数占比</div>
      <div id="pie1" style="width: 98%;height: 85%;"></div>
    </div>
    <div class="item">
      <div class="itemHeader"><i class="el-icon-table-lamp"></i> zspt 校园各区路灯开关状态统计</div>
      <div id="line-bar1" style="width: 98%;height: 92%;"></div>
    </div>
    <div class="item">
      <div class="itemHeader"><i class="el-icon-s-opportunity"></i> zspt 照明灯各区照明所耗功率</div>
      <div id="radar1" style="width: 98%;height: 79%;"></div>
    </div>
    <div class="item">
      <div class="itemHeader"><i class="el-icon-data-analysis"></i> F214 电脑个数统计</div>
      <div id="gauge1" style="width: 98%;height: 85%;"></div>
    </div>
    <div class="item">
      <div class="itemHeader"><i class="el-icon-data-line"></i> F214 各电脑电压、电流明细图</div>
      <div id="scatter1" style="width: 98%;height: 85%;"></div>
    </div>
    <div class="item">
      <div class="itemHeader"><i class="el-icon-map-location"></i> 中国地图</div>
      <div id="map2" style="width: 98%;height: 85%;margin-left: 30px;"></div>
    </div>
    <div class="item" style="width: 47%;">
      <div class="itemHeader"><i class="el-icon-s-marketing"></i> zspt 单相电表概况</div>
      <div id="line1" style="width: 98%;height: 90%;"></div>
    </div>
    <div class="item" style="width: 47%;">
      <div class="itemHeader"><i class="el-icon-magic-stick"></i> 北区创新楼 8 楼空调采集频率关系图</div>
      <div id="guanxi1" style="width: 98%;height: 89%;"></div>
    </div>
  </div>
</template>

<script>
  import {
    roadLightInit, 
    roomLightInit, 
    computerInit, 
    airConditionInit, 
    spemInit, 
    chinaInit,
  } from '@/assets/js/echarts.js'
  export default {
    name: 'allEcharts',
    mounted() {
      roadLightInit();
      roomLightInit();
      computerInit();
      airConditionInit();
      spemInit();
      chinaInit();
    }
  }
</script>

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    height: 100%;
    width: 100%;
  }
  .item {
    height: 250px;
    width: 32%;
    background-color: #FFFFFF;
    margin: 7px;
    border-radius: 20px;
  }
  .itemHeader {
    float: left;
    color: #006B9D;
    font-weight: 600;
    margin: 18px;
  }
</style>
